@import '../bootstrap'

progress-linear(progress)
  .progress-linear__bar
    background: lighten(progress, 50%)

  .progress-linear__bar__determinate
    background: progress

  .progress-linear__bar__indeterminate
    .long, .short
      background: progress

.progress-linear
  background: transparent
  margin: 1rem 0
  overflow: hidden
  width: 100%
  position: relative
  progress-linear($theme.primary)

  &__bar
    width: 100%
    height: inherit
    position: relative
    transition: .3s ease-in
    z-index: 1

    &__determinate
      height: inherit
      transition: .3s ease-in

    &__indeterminate
      .long, .short
        height: inherit
        position: absolute
        left: 0
        top: 0
        bottom: 0
        will-change: left, right
        width: auto
        background-color: inherit

      &--active .long
        animation: indeterminate
        animation-duration: 2.2s
        animation-iteration-count: infinite

      &--active .short
        animation: indeterminate-short
        animation-duration: 2.2s
        animation-iteration-count: infinite

  &--query
    .progress-linear__bar__indeterminate
      &--active .long
        animation: query
        animation-duration: 2s
        animation-iteration-count: infinite

      &--active .short
        animation: query-short
        animation-duration: 2s
        animation-iteration-count: infinite

  &--secondary
    progress-linear($theme.secondary)

  &--success
    progress-linear($theme.success)

  &--info
    progress-linear($theme.info)

  &--warning
    progress-linear($theme.warning)

  &--error
    progress-linear($theme.error)

  @keyframes indeterminate
    0%
      left: -90%
      right: 100%
    60%
      left: -90%
      right: 100%
    100%
      left: 100%
      right: -35%

  @keyframes indeterminate-short
    0%
      left: -200%
      right: 100%
    60%
      left: 107%
      right: -8%
    100%
      left: 107%
      right: -8%

  @keyframes query
    0%
      right: -90%
      left: 100%
    60%
      right: -90%
      left: 100%
    100%
      right: 100%
      left: -35%

  @keyframes query-short
    0%
      right: -200%
      left: 100%
    60%
      right: 107%
      left: -8%
    100%
      right: 107%
      left: -8%

